<!DOCTYPE html>
<html lang="zh-Cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>燕凯-应聘前端开发-2021</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/style.css">
    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
    <div id="page">
        <header>
            <h1>燕凯</h1>
            <p>应聘前端开发</p>
        </header>
        <main>
            <aside>
                <!--<div class="avatar"><img src="./images/photo.png" alt="我的头像"></div>-->
                <section>
                    <div class="personal">
                        <h2>基本信息</h2>
                        <ul>
                            <li><span>姓名</span><span>燕凯</span></li>
                            <li><span>性别</span><span>男</span></li>
                            <li><span>年龄</span><span>24</span></li>
                            <li><span>学历</span><span>本科</span></li>
                        </ul>
                    </div>
                </section>
                <section>
                    <div class="more">
                        <h2>了解更多</h2>
                        <ul>
                            <li>
                                <img src="./images/githubico.png" alt="github">
                                <a href="https://github.com/KailoveQ" target="_block">访问我的github</a>
                            </li>
                            <li>
                                <img src="./images/yuqueico.png" alt="语雀">
                                <a href="https://www.yuque.com/devsuno/web-learn" target="_block">前端学习笔记 </a>
                            </li>
                            <li>
                                <img src="./images/juejinico.png" alt="语雀">
                                <a href="https://juejin.cn/user/1037573431242270/posts" target="_block">个人技术博客</a>
                            </li>


                        </ul>
                    </div>
                </section>
                <section>
                    <div class="skills">
                        <h2>技能清单</h2>
                        <ul>
                            <li>熟悉<span class="high-light">HTML、CSS</span>的页面布局,熟练使用<span
                                    class="high-light">flex</span>弹性布局，能根据设计图像素级完成页面制作。</li>
                            <li>熟悉HTML5及语义化，掌握<span class="high-light">CSS3动画、过渡、渐变</span>效果等常用技术。</li>
                            <li>熟悉原生<span class="high-light">JavaScript</span>和部分<span
                                    class="high-light">ES6</span>，并理解其重要概念如：<span
                                    class="high-light">原型、闭包、面向对象、节流、防抖</span>等</li>
                            <li>会使用<span class="high-light">SASS</span>语法、 <span
                                    class="high-light">TypeScript</span>，并且有相关的项目开发经验。</li>
                            <li>熟悉<span class="high-light">Vue</span>常用功能，理解如生命周期、数据响应式等概念， 能够使用<span
                                    class="high-light">Vue 全家桶</span>开发项目，有相关<span class="high-light">项目开发经验</span>。</li>
                            <li>熟练使用<span class="high-light">VsCode、WebStorm、Git、GitHub</span>等开发工具。</li>
                            <li>了解Webpack/Npm/Yarn/Echart/ElementUI/Antd</li>
                        </ul>
                    </div>
                </section>
                <section>
                    <div class="chat">
                        <h2>联系方式</h2>
                        <ul>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-phone"></use>
                                </svg>
                                <a href="tel:15967537583">17506420459</a></li>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-wechat"></use>
                                </svg>
                                <span>17506420459</span></li>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-email"></use>
                                </svg>
                                <a href="mailto:603703281@qq.com">1114366961@qq.com</a>
                            </li>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-position"></use>
                                </svg>
                                <span>青岛</span>
                            </li>
                        </ul>
                    </div>
                </section>
                <section></section>
            </aside>
            <div class="content">
                <section>
                    <div class="case">
                        <h2>项目经历</h2>
                        <ul>
                            <li>
                                <div class="title">
                                    <h2>《Vue2造轮子》</h2>
                                    <div class="link">
                                        <a href="https://github.com/KailoveQ/GuLu-Vue2" target="_block" >项目源码</a>
                                        <a href="https://kailoveq.gitee.io/bear-ui/"
                                           id="dingdang-ui"
                                           target="_block">在线预览</a>
                                        <div class="QRcode dingdang_vue">
                                            <div>手机预览请扫码</div>
                                            <img src="images/bear-ui.png" alt="二维码">
                                        </div>
                                    </div>
                                </div>
                                <img src="./images/bear-ui2.jpg" alt="项目预览图">
                                <div class="introduction">
                                    <span><strong>● 项目介绍:</strong>该项目是参照Ant Design、Element UI、iView 等 UI
                                        库思路，做的一套基于 Vue2 的简易<span class="high-light">UI 组件库</span> 。目前已支持8个基础组件，更多组件尚在开发中。
                                        每个组件均经历从需求分析、调试、<span class="high-light">单元测试</span>，发布于<span class="high-light">npmjs.org</span>。
                                        完成该项目使我对 Vue 的常用特征更加熟悉，同时提升了自己对前端工程化流程的深刻理解，近一步了解开源文化。</span>
                                </div>
                                <div class="skill"><span><strong>● 技术栈：JavaScript/ Vue2 / Travis CI / chai / SCSS / ES6 / </strong></span></div>
                            </li>
                            <li>
                                <div class="title">
                                    <h2>《富贵记账》</h2>
                                    <div class="link">
                                        <a href="https://github.com/KailoveQ/Riches-Vue" target="_block">Vue版源码</a>
                                        <a href="https://kailoveq.gitee.io/riches-vue-cli/#/labels" target="_block"
                                            id="preview-vue">Vue版预览</a>
                                        <div class="QRcode account_vue">
                                            <div>手机预览请扫码</div>
                                            <img src="images/Rich.png" alt="二维码">
                                        </div>
                                    </div>
                                </div>
                                <img src="./images/Rich.jpg" alt="项目预览图">
                                <div class="introduction">
                                    <span><strong>● 项目介绍:</strong>富贵记账是一款极简的记账产品，由本人独立设计并采用<span
                                            class="high-light">Vue 2.6 +</span><span
                                            class="high-light">TypeScript</span>开发实现。
                                    </span>
                                </div>
                                <div class="achieve">
                                    <span>
                                        <strong>● 实现功能:</strong>
                                        项目共包含
                                        <span
                                            class="high-light">总览，日期，记账，统计
                                        </span>
                                        四个页面，实现了记账、数据可视化、账单统计、以及按照不同选项进行排序。
                                    </span>
                                </div>
                                <div class="achieve">
                                    <span>
                                        <strong>● 亮点:</strong>
                                        使用
                                        <span class="high-light">原生 JS Date 对象
                                        </span>
                                        封装了日历组件（实现对每一天的数据记账信息查看）
                                        <span
                                             class="high-light">eventBus 进行传值
                                        </span>
                                    </span>
                                </div>
                                <div class="skill"><span><strong>● 技术栈：TypeScript/Vue2/Vue
                                            Router/Echart/Yarn/ES6/SCSS</strong></span>
                                </div>
                            </li>


                            <li>
                                <div class="title">
                                    <h2>《小程序简光》</h2>
                                    <div class="link">
                                        <a href="https://github.com/KailoveQ/Old-Times" target="_block">前端</a>
                                        <a href="https://github.com/KailoveQ/Old-Times-koa2" target="_block">后端</a>
                                        <a  target="_block"
                                           id="old-times" >
                                            微信预览</a>
                                        <div class="QRcode old-times">
                                            <div>手机预览请扫码</div>
                                            <img src="images/oldTimes1.png" alt="二维码" style="width: 160px;">
                                        </div>
                                    </div>
                                </div>
                                <img src="./images/oldTime.jpg" alt="项目预览图">
                                <div class="introduction">
                                    <span><strong>● 项目介绍:</strong> 简单时光 是一个书籍音乐鉴赏类的微信小程序，分为
                                        <span
                                        class="high-light">前端</span>和
                                        <span class="high-light">后端</span>两个部分。
                                    </span>
                                </div>
                                <div class="achieve">
                                    <span>
                                        <strong>● 前端实现:</strong>
                                        全部采用
                                        <span class="high-light">自定义组件</span>的开发方式。
                                        包括三个主要页面和十余个自定义组件，使用了很多组件高级特性：如
                                        <span class="high-light">Slot插槽</span>、
                                        <span class="high-light">Behavior行为</span>、
                                        <span class="high-light">externalClass外部样式</span>、
                                        <span class="high-light">组件事件传递</span>等。
                                    </span>
                                    <br/>
                                    <span>
                                        <strong>● 后端接口:</strong>
                                        使用
                                        <span class="high-light">Node.js,Koa2和MySQL</span>
                                         实现服务器的API接口和数据库的增删改查。
                                        通过该项目的学习熟悉了 JS的async与await的使用，Koa的异步编程模型、<span class="high-light">洋葱模型</span>和<span class="high-light">Koa中间件</span>的应用，理解Node.js在Web架构中的作用。项目开发阶段遇到了很多困难，但同时学习到了很多debug 的方式。
<!--                                        Koa编写API、多koa-router拆分路由、多koa-router拆分路由。-->

                                    </span>

                                </div>
                                <div class="achieve">
                                    <span>
                                        <strong>● 亮点:</strong>
                                        在熟悉小程序的前端业务后，继续学习了Koa2去开发后端的API接口，最后前后端去对接数据，对一个项目前后端的对接有了一个基本的认知。
<!--                                        <span class="high-light">原生 JS Date 对象-->
<!--                                        </span>-->
<!--                                        封装了日历组件（实现对每一天的数据记账信息查看）-->
<!--                                        <span-->
<!--                                            class="high-light">eventBus 进行传值-->
<!--                                        </span>-->
                                    </span>
                                </div>
                                <div class="skill"><span><strong>● 技术栈：Node.js/Koa2/MySQL/Validator/Sequelize</strong></span>
                                </div>
                            </li>






                            <li >
                                <div class="title">
                                    <h2>《哆啦A梦》</h2>
                                    <div class="link">
                                        <a href="https://github.com/KailoveQ/Doraemon"
                                            target="_block">项目源码</a>
                                        <a href="https://kailoveq.github.io/Fat-Blue/dist/index.html"
                                            target="_block"
                                        id="doraemon"
                                        >在线预览</a>
                                        <div class="QRcode doraemon">
                                            <div>手机预览请扫码</div>
                                            <img src="images/doraemon.png" alt="二维码">
                                        </div>
                                    </div>
                                </div>
<!--                                <img src="./images/doraemon.jpg" alt="项目预览图">-->
                                <div class="introduction">
                                    <span><strong>项目介绍:</strong>doraemon是一个使用<span class="high-light">原生JS</span>开发的，动态显示 CSS
                                        画一个哆啦 A 梦过程的小作品。该作品主要思路是通过<span
                                            class="high-light">间隔计时器遍历预先设置样式代码</span>，将其一个个显示在页面上，并在 style 标签上作同样处理，以使代码
                                        CSS 生效。此外增加调速按钮，以增加用户体验</span>
                                </div>
                                <div class="achieve">
                                    <span>
                                        <strong>亮点:</strong>
                                        遵循
                                        <span class="high-light">面向对象</span>
                                        的思想：对 JS 代码进行封装
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="title">
                                    <h2>《轻画板》</h2>
                                    <div class="link">
                                        <a href="https://github.com/KailoveQ/canvas-drawing-board-1"
                                           target="_block">项目源码</a>
                                        <a href="https://kailoveq.gitee.io/canvas-drawing-board-1/"
                                           target="_block"
                                           id="canvas"
                                        >PC端预览</a>
<!--                                        <div class="QRcode canvas">-->
<!--                                            <div>PC端预览</div>-->
<!--                                            <img src="images/canvas.png" alt="二维码">-->
<!--                                        </div>-->
                                    </div>
                                </div>
                                <div class="introduction">
                                    <span>
                                        <strong>项目介绍:</strong>
                                        画板是一个使用
                                        <span class="high-light">原生Canvas</span>
                                        开发的，可以自定义画画的作品。该作品主要思路是通过
                                        <span class="high-light">根据用户的鼠标或者触摸获取当前位置</span>，
                                        将其显示在页面上，此外增加
                                        <span class="high-light">修改颜色，画笔宽度，清空画板，保存按钮</span>
                                        ，以增加用户体验。支持
                                        <span class="high-light">PC </span>和
                                        <span class="high-light">手机端</span>。
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </section>
<!--                <section>-->
<!--                    <div class="open-origin">-->
<!--                        <h2>开源项目</h2>-->
<!--                        <ul>-->
<!--                            <li>-->
<!--                                <div class="title">-->
<!--                                    <h3>1.实现简易jQuery-封装DOM库</h3>-->
<!--                                    <div class="link">-->
<!--                                        <a href="https://github.com/DevSuno/dom-demo" target="_block">项目源码</a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="introduction">-->
<!--                                    <span><strong>项目介绍:</strong>该项目是本人在学习<span class="high-light">原生DOM编程</span>和<span-->
<!--                                            class="high-light">jQuery</span>过程中，参考jQuery的核心思想对原生DOM进行的一个简易封装，加深了我对DOM与jQuery的理解，并写了一篇个人博客</a>记录总结。</span>-->
<!--                                </div>-->
<!--                            </li>-->

<!--                        </ul>-->
<!--                    </div>-->
<!--                </section>-->
                <section>
                    <div class="work">
                        <h2>工作经历</h2>
                        <div>
                            <span>• 2019.10 - 2020.10</span>
                            <span>青岛海之晨工业装备有限公司</span>
                            <span>机器视觉工程</span>
                        </div>
                    </div>
                </section>
               <section>
                    <div class="education">
                        <h2>在校荣誉</h2>
                        <div>
                            <span>• 第十一届山东省大学生智能制造大赛一等奖       （人形机器人举重）</span>
                            <span></span>
                        </div>
                        <div>
                            <span>• 第十届山东省大学生智能制造大赛一等奖    （双足机器人送水）</span>
                            <span></span>
                        </div>
                        <div>
                            <span>• 第七届山东省高校机器人大赛二等奖    （双足竞步机器人）</span>
                            <span></span>
                        </div>
                        <div>
                            <span>• 第三届山东省大学生创客大赛二等奖   （海水养殖无人巡检船）</span>
                            <span></span>
                        </div>
                        <div>
                            <span>• 第六届山东省高校机器人大赛二等奖    （太阳能自动蜂蜜采集装置）</span>
                            <span></span>
                        </div>
                        <div>
                            <span>• 第十三届全国大学生“恩智浦”杯智能汽车竞赛三等奖</span>
                        </div>
                        <div>
                            <span>• 2018全国3D大赛11周年精英联赛二等奖   （一种新型智能稳定装置）</span>
                        </div>
                        <div>
                            <span>• 2018年“创青春”·海尔山东省大学生创业大赛银奖</span>
                        </div>
                    </div>
                </section>
                <section>
                <div class="open-origin">
                    <h2>其他特长</h2>
                    <div>
                        <strong>语言能力： </strong>
                        <span>普通话(二级甲等)标准流利;大学英语四级，听力能力较强。</span>
                    </div>

                    <div>
                        <strong>支教经历： </strong>
                        <span>2017年参与“万名大学生志愿者服务千所儿童家园”支教活动，被评为来宾市优秀志愿者。</span>
                    </div>
                    <div>
                        <strong>乐器能力： </strong>
                        <span>擅长口琴，熟悉吉他。</span>
                    </div>
                </div>
                </section>
            </div>
        </main>
    </div>
    <script src="//at.alicdn.com/t/font_2017820_cgodkiku6nr.js"></script>
    <script src="./index.js"></script>
</body>

</html>